<template>
  <a href="javascript:;" class="" @click.stop="audioplay()">
    <div class="flex align-items">
      <el-icon v-if="isplaying"><VideoPause /></el-icon>
      <el-icon style="font-size:12px;" v-else>
        <headset />
      </el-icon>
      <span class="txttdellipsis" style="margin-left:3px;">{{row.name}}</span>
    </div>
  </a>
  <audio-player
    ref="audioPlayerRef"
    :play-src="playSrc"
    @endedPlay="endedPlay"
    v-show="false"
  />
</template>

<script>
  import { toRef, ref, computed, nextTick } from 'vue'
  import AudioPlayer from "../player/AudioPlayer";
  import {getVideoPlayUrl} from "@/utils/usage-config";

  export default {
    name: "AudioTableColumn",
    components: { AudioPlayer },
    props: {
      row: {
        type: Object,
        required: true
      },
      sourcefrom: {
        type: String,
        default: 'local'
      }
    },
    emits: ['handleAudioPlay'],
    setup(props, { emit }) {
      const tableRow = toRef(props, 'row')
      const isplaying = ref(false)
      const audioPlayerRef = ref(null)
      const refKey = computed(() => {
        if (props.sourcefrom == 'local') {
          return props.row.videoid
        } else {
          return props.row.fid
        }
      })
      const playSrc = computed(() => {
        if (props.sourcefrom == 'local') {
          if (props.row.isself == 1) {
            // 自有介质
            return getVideoPlayUrl(props.row)
          } else {
            // 第三方介质
            return props.row.url
          }
        } else {
          // 云存储介质
          return getVideoPlayUrl(props.row)
        }
      })
      // 点击播放音频
      const audioplay = () => {
        isplaying.value = !isplaying.value
        if (!isplaying.value) {
          nextTick(() => {
            audioPlayerRef.value.audiopause()
          })
        } else {
          nextTick(() => {
            audioPlayerRef.value.audioplay()
          })
        }
        emit('handleAudioPlay', refKey.value)
      }

      const audioPause = () => {
        isplaying.value = false
        nextTick(() => {
          audioPlayerRef.value.audioref.currentTime = 0
          audioPlayerRef.value.audiopause()
        })
      }

      const endedPlay = () => {
        isplaying.value = false
      }

      return {
        tableRow,
        isplaying,
        audioplay,
        audioPlayerRef,
        refKey,
        playSrc,
        endedPlay,
        audioPause
      }
    }
  }
</script>

<style scoped>

</style>
